<template>
  <div class="sjxfooter">
    <div class="footer-main forFormPC">
      <div class="f-1">
        <div class="f-1-1">
          <p class="f-1-title">{{ $t('footer.ourPartners') }}</p>
          <div class="f-1-pic pic">
            <img 
              src="../static/img/paasoo.png" 
              alt="">
          </div>
          <div class="f-1-pic1 pic">
            <img 
              src="../static/img/pa.png" 
              alt="">
          </div>
        </div>
        <div class="f-1-3">
          <div class="f-1-pic4 pic">
            <img 
              src="../static/img/parter1.png" 
              alt="">
          </div>
          <div class="f-1-pic5 pic">
            <img 
              src="../static/img/parter2.png" 
              alt="">
          </div>
          <div class="f-1-pic6 pic">
            <img 
              src="../static/img/parter3.png" 
              alt="">
          </div>
        </div>
        <div class="f-1-2">
          <p class="f-1-title">{{ $t('footer.serviceHotline') }}</p>
          <div 
            class="ico-title" 
            style="margin-top:20px">
            <div class="ico-img">
              <img 
                src="../static/img/dianhua.png" 
                alt="">
            </div>
            <span class="f-1-tel">1900633449</span>
          </div>
          <div 
            class="ico-title" 
            style="margin-top:15px">
            <div class="ico-img">
              <img 
                src="../static/img/youxiang.png" 
                alt="">
            </div>
            <span class="f-1-tel">sophielamnguyen@gmail.com</span>
          </div>
          <div 
            class="ico-title" 
            style="margin-top:15px">
            <div class="ico-img">
              <img 
                class="icoimger" 
                src="../static/img/zalo1.png" 
                alt="">
            </div>
            <span class="f-1-tel">zalo.me/371306362589697932</span>
          </div>
          <div class="xuxian"/>
          <div class="ico-title1">
            <div class="ico-img">
              <img 
                src="../static/img/youxiang.png" 
                alt="">
            </div>
            <div class="title1">
              <div class="time">
                <span>{{ $t('footer.MtoF') }}</span>
                <span>am 8:30~11:30   pm 13:00~17:30</span>
              </div>
              <div class="time">
                <span>{{ $t('footer.Sat') }}</span>
                <span>am 8:30~12:00</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="f-1-1 f-1-3">
          <p class="f-1-title">{{ $t('footer.downloadMyDong') }}</p>
          <div class="f-1-pic2 pic">
            <a href="https://play.google.com/store/apps/details?id=com.ps.vaydong"><img 
              src="../static/img/google.png" 
              alt=""></a>
          </div>
          <div class="f-1-pic3 pic">
            <img 
              src="../static/img/bt1.png" 
              alt="">
          </div>
        </div> -->
      </div>
      <div class="f-thirdly"/>
      <!-- <div class="f-first">
        <router-link :to="{path:'/loan'}">{{ $t('header.howToLoan') }}</router-link>
        <router-link :to="{path:'/back'}">{{ $t('header.howToPay') }}</router-link>
        <router-link :to="{path:'/faq'}">{{ $t('header.commonProblem') }}</router-link>
        <router-link :to="{path:'/aboutus'}">{{ $t('header.about') }}</router-link>
        <router-link :to="{path:'/callwe'}">{{ $t('header.contact') }}</router-link>
      </div>
      <div class="f-second">
        <div class="tutu1 pic"><img 
          src="../static/img/facebook.png" 
          alt=""></div>
        <div class="tutu2 pic"><img 
          src="../static/img/zalo.png" 
          alt=""></div>
        <div class="tutu3 pic"><img 
          src="../static/img/ins.png" 
          alt=""></div>
      </div> -->
      <div class="f-fourth">
        2018 <span>@</span> {{ $t('footer.Copyright') }}
        <p>Tên công ty：HONGCHENG TECHNOLOGY COMPANY LIMITED</p>
        <p> D-U-N-S Number：556697728</p>
      </div>
    </div>
    <div class="footer-main forFormM">
      <div class="f-1">
        <div class="f-1-title">{{ $t('footer.serviceHotline') }}</div>
        <div class="f-1-1">
          <div class="ico-title">
            <div class="ico-img">
              <img 
                src="../static/img/shijian.png" 
                alt="">
            </div>
            <div class="title">
              <div class="time flex">
                <span class="label">{{ $t('footer.MtoF') }}</span>
                <div class="value">
                  <div>am 8:30~11:30</div>
                  <div> pm 13:00~17:30</div>
                </div>
              </div>
              <div class="time flex">
                <span class="label">{{ $t('footer.Sat') }}</span>
                <span class="value">am 8:30~12:00</span>
              </div>
            </div>
          </div>
          <div class="ico-title">
            <div class="ico-img">
              <img 
                src="../static/img/dianhua.png" 
                alt="">
            </div>
            <div class="title">
              <span class="value">1900633449</span>
            </div>
          </div>
          <div class="ico-title">
            <div class="ico-img">
              <img 
                src="../static/img/youxiang.png" 
                alt="">
            </div>
            <div class="title">
              <span class="value">sophielamnguyen@gmail.com</span>
            </div>
          </div>
          <div class="ico-title">
            <div class="ico-img">
              <img 
                src="../static/img/zalo1.png" 
                alt="">
            </div>
            <div class="title">
              <span class="value">zalo.me/371306362589697932</span>
            </div>
          </div>
        </div>
        <!-- <div class="xuxian"/>
        <div class="f-1-1">
          <p class="f-1-title">{{ $t('footer.downloadMyDong') }}</p>
          <div class="f-1-pic">
            <div class="pic">
              <a href="https://play.google.com/store/apps/details?id=com.ps.vaydong"><img 
                src="../static/img/google.png" 
                alt=""></a>
            </div>
            <div class="pic">
              <img 
                src="../static/img/app.png" 
                alt="">
            </div>
          </div>
        </div> -->
      </div>
      <div class="f-fourth">
        2018 <span>@</span> {{ $t('footer.Copyright') }}
        <p>Tên công ty：HONGCHENG TECHNOLOGY COMPANY LIMITED</p>
        <p> D-U-N-S Number：556697728</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sjxfooter',
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
@mixin fle($style) {
  display: flex;
  align-items: center;
  justify-content: $style;
}
@media screen and (min-width: 1200px) {
  .forFormM {
    display: none !important;
  }
  .icoimger {
    width: 24px;
  }
  .sjxfooter {
    width: 100%;
    height: 620px;
    background-color: #3462ff;
    .footer-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      padding: 72px 0 10px;
      @include fle(center);
      .f-1 {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .f-1-1 {
          width: 200px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .f-1-title {
            text-align: center;
            font-size: 20px;
            color: #fff;
          }
          .f-1-pic {
            width: 114px;
            height: 29px;
            margin: 30px 0 25px;
          }
          .f-1-pic1 {
            width: 200px;
            height: 45px;
          }
          .f-1-pic2 {
            width: 214px;
            height: 64px;
          }
          .f-1-pic3 {
            width: 214px;
            height: 76px;
          }
        }
        .f-1-2 {
          width: 440px;
          display: flex;
          // justify-content: center;
          flex-wrap: wrap;
          .f-1-title {
            text-align: center;
            font-size: 20px;
            color: #fff;
          }
          .ico-title {
            width: 100%;
            height: 24px;
            display: flex;
            .ico-img {
              width: 24px;
              height: 24px;
              margin-right: 30px;
            }
            .f-1-tel {
              font-size: 18px;
              color: #fff;
            }
          }
          .xuxian {
            width: 100%;
            height: 1px;
            border: 1px dashed #fff;
            margin: 25px 0 19px;
          }
          .ico-title1 {
            width: 100%;
            height: 50px;
            display: flex;
            .ico-img {
              width: 24px;
              height: 24px;
              margin-right: 30px;
            }
            .title1 {
              flex: auto;
              .time {
                display: flex;
                justify-content: space-between;
                margin: 5px 0;
                span {
                  font-size: 14px;
                  color: #fff;
                }
              }
            }
          }
          .mar {
            margin: 30px 0 15px;
          }
        }
        .f-1-3 {
          width: 170px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .f-1-pic4 {
            width: 170px;
            height: 60px;
          }
          .f-1-pic5 {
            width: 170px;
            height: 60px;
          }
          .f-1-pic6 {
            width: 170px;
            height: 60px;
          }
        }
      }
      .f-first {
        width: 100%;
        font-size: 16px;
        color: #fff;
        @include fle(center);
        a {
          color: #fff;
          padding: 0 20px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .f-second {
        width: 100%;
        @include fle(center);
        .tutu1 {
          width: 70px;
          height: 70px;
        }
        .tutu2 {
          width: 65px;
          height: 66px;
          margin: 0 62px 0;
        }
        .tutu3 {
          width: 68px;
          height: 68px;
        }
      }
      .f-thirdly {
        width: 100%;
        height: 1px;
        background-color: #fff;
      }
      .f-fourth {
        font-size: 14px;
        color: #fff;
        text-align: center;
        margin-top: 20px;
        p,
        span {
          color: #fff;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .forFormM {
    display: none !important;
  }
  .icoimger {
    width: 24px;
  }
  .sjxfooter {
    width: 100%;
    height: 620px;
    background-color: #3462ff;
    .footer-main {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      padding: 72px 0 10px;
      @include fle(center);
      .f-1 {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .f-1-1 {
          width: 200px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .f-1-title {
            text-align: center;
            font-size: 20px;
            color: #fff;
          }
          .f-1-pic {
            width: 114px;
            height: 29px;
            margin: 30px 0 25px;
          }
          .f-1-pic1 {
            width: 200px;
            height: 45px;
          }
          .f-1-pic2 {
            width: 214px;
            height: 64px;
          }
          .f-1-pic3 {
            width: 214px;
            height: 76px;
          }
        }
        .f-1-2 {
          width: 440px;
          display: flex;
          // justify-content: center;
          flex-wrap: wrap;
          .f-1-title {
            text-align: center;
            font-size: 20px;
            color: #fff;
          }
          .ico-title {
            width: 100%;
            height: 24px;
            display: flex;
            .ico-img {
              width: 24px;
              height: 24px;
              margin-right: 30px;
            }
            .f-1-tel {
              font-size: 18px;
              color: #fff;
            }
          }
          .xuxian {
            width: 100%;
            height: 1px;
            border: 1px dashed #fff;
            margin: 25px 0 19px;
          }
          .ico-title1 {
            width: 100%;
            height: 50px;
            display: flex;
            .ico-img {
              width: 24px;
              height: 24px;
              margin-right: 30px;
            }
            .title1 {
              flex: auto;
              .time {
                display: flex;
                justify-content: space-between;
                margin: 5px 0;
                span {
                  font-size: 14px;
                  color: #fff;
                }
              }
            }
          }
          .mar {
            margin: 33px 0 26px;
          }
        }
        .f-1-3 {
          width: 170px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .f-1-pic4 {
            width: 170px;
            height: 60px;
          }
          .f-1-pic5 {
            width: 170px;
            height: 60px;
          }
          .f-1-pic6 {
            width: 170px;
            height: 60px;
          }
        }
      }
      .f-first {
        width: 100%;
        font-size: 16px;
        color: #fff;
        @include fle(center);
        a {
          color: #fff;
          padding: 0 20px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .f-second {
        width: 100%;
        @include fle(center);
        .tutu1 {
          width: 70px;
          height: 70px;
        }
        .tutu2 {
          width: 65px;
          height: 66px;
          margin: 0 62px 0;
        }
        .tutu3 {
          width: 68px;
          height: 68px;
        }
      }
      .f-thirdly {
        width: 100%;
        height: 1px;
        background-color: #fff;
      }
      .f-fourth {
        font-size: 14px;
        color: #fff;
        min-height: 70px;
        text-align: center;
        margin-top: 20px;
        p,
        span {
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .forFormPC {
    display: none !important;
  }
  .sjxfooter {
    width: 100%;
    background-color: #3462ff;
    .footer-main {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      @include fle(center);
      .f-1 {
        width: 100%;
        .f-1-title {
          text-align: center;
          font-size: 15px;
          color: #fff;
          font-weight: 700;
          line-height: 70px;
        }
        .f-1-1 {
          .ico-title {
            width: 88%;
            display: flex;
            margin: 0 auto;
            .ico-img {
              img {
                width: 18px;
                height: 18px;
              }
              margin-right: 10px;
              margin-top: 5px;
            }
            .title {
              flex: auto;
              line-height: 30px;
              .label {
                flex: auto;
              }
              .value {
                flex: 0 0 120px;
                color: #fff;
              }
              div,
              span {
                font-size: 14px;
                color: #fff;
              }
            }
          }
          .pic {
            width: 80%;
          }
        }
        .xuxian {
          width: 90%;
          height: 1px;
          border: 1px dashed #fff;
          margin: 20px auto;
        }
        .f-1-pic {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .pic {
            flex: 0 0 150px;
            a {
              display: block;
              img {
                width: 150px;
              }
            }
          }
        }
      }
      .f-fourth {
        font-size: 12px;
        color: #fff;
        min-height: 70px;
        text-align: center;
        margin-top: 20px;
        p,
        span {
          font-size: 12px;
          color: #fff;
          line-height: 20px;
          text-align: center;
        }
      }
    }
  }
}
</style>
